<template>
    <div class="answer-content">
      <el-card class="full" body-style="padding:'10px'">
        <el-form>
          <el-form-item align="left">
            <el-radio-group v-if='isSingle' @change="setSingleAnswer" v-model="singleAnswer">
              <div style="padding-bottom: 20px" v-for="(option) in splitOptions" :key="option.index">
                <el-radio :label="option.index">
                  {{option.content}}
                </el-radio>
              </div>
            </el-radio-group>
            <el-checkbox-group v-if="isMulti" @change="setMultiAnswer" v-model="multiAnswer">
              <div v-for="option in splitOptions" :key="option.index">
                <el-checkbox :label="option.index">
                  {{option.content}}
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
</template>

<script>
import QuestionConst from '../../../../converts/question/QuestionConst'
import { mapState } from 'vuex'
import __ from 'lodash'
export default {
  data () {
    return {
      singleAnswer: -1,
      multiAnswer: []
    }
  },
  computed: {
    ...mapState({
      curQuesInfo: ({ contest }) => contest.curQuesInfo
    }),
    splitOptions () {
      if (!this.curQuesInfo) {
        return []
      }
      return __.map(this.curQuesInfo.options.split('|'), (str, index) => {
        return {
          index: index,
          content: str
        }
      })
    },
    isSingle () {
      return this.curQuesInfo.type === QuestionConst.TYPE.SINGLE_INT
    },
    isMulti () {
      return this.curQuesInfo.type === QuestionConst.TYPE.MULTI_INT
    }
  },
  methods: {
    setSingleAnswer () {
      this.$store.commit('contest/setAnswerList', { index: this.curQuesInfo.index, answer: this.singleAnswer })
    },
    setMultiAnswer () {
      this.$store.commit('contest/setAnswerList', { index: this.curQuesInfo.index, answer: this.multiAnswer })
    }
  },
  watch: {
    curQuesInfo (value) {
      if (!value) {
        return
      }
      let answerList = this.$store.state.contest.answerList
      switch (value.type) {
        case QuestionConst.TYPE.SINGLE_INT: {
          try {
            // 当前答案
            let answer = answerList[value.index]
            if (answer == null || __.isEmpty(__.trim(answer))) {
              this.singleAnswer = -1
              return
            }
            this.singleAnswer = parseInt(answerList[value.index])
          } catch (e) {
            this.singleAnswer = -1
          }
          break
        }
        case QuestionConst.TYPE.MULTI_INT:try {
          let answer = answerList[value.index]
          if (answer == null || __.isEmpty(__.trim(answer))) {
            this.multiAnswer = []
            return
          }
          this.multiAnswer = JSON.parse(answerList[value.index])
        } catch (e) {
          this.multiAnswer = []
        } break
      }
      // value.index
    }
  }
}
</script>

<style scoped lang="less">

</style>
